<!-- 机构详情 -->
<template>
    <div class="vue-box submit-box--dialog" style="width: 1000px;">
        <!-- ------- 内容部分 ------- -->
        <div class="c-card">
            <el-form label-width="12em" label-position="top" >
                <el-row >
                    <el-col :span="8">
                        <show-info name="机构名称">{{ state.model.fixmedins_name }}</show-info>
                    </el-col>
                    <el-col :span="8">
                        <show-info name="机构编码">{{ state.model.fixmedins_code }}</show-info>
                    </el-col>
                    <el-col :span="8">
                        <show-info name="负责人姓名" :value="state.model.Director" ></show-info>
                    </el-col>
                    <el-col :span="8">
                        <show-info name="负责人手机号" :value="state.model.fixmedins_phone" ></show-info>
                    </el-col>
                    <el-col :span="8">
                        <show-info name="医疗服务机构类型" type="dict" dictName="fixmedins_type" :value="state.model.fixmedins_type"></show-info>
                    </el-col>
                </el-row>
                
            </el-form>
            
        </div>
        <div class="c-card">
            <el-tabs
                v-model="tabActive"
                type="card"
                class="margin-top"
            >
                <el-tab-pane label="医疗机构资质" name="first">
                    <div class="aic pic-tab">
                        <div class="item" :class="{active: certificate.active == index}" v-for="(item,index) in certificate.picCfg" :key="index" @click="certificate.active = index">{{ item.name }}</div>
                    </div>
                    <div class="pic-box margin-top-lg">
                        <el-image
                         v-for="(item,index) in certificate.picCfg[certificate.active].list"
                            :key="index"
                            style="width: 100px; height: 100px;margin-right: 10px;"
                            :src="item"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="certificate.picCfg[certificate.active].list"
                            :initial-index="index"
                            fit="cover"
                            />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="医疗机构医师" name="second">
                    <com-table rowKey="OnlineInquiryNo" :tableData="doctors.tableData" :tableCfg="doctors.tableCfg" :showPagin="false" :showOperation="false">
                    </com-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup name="sys-user-info">
import {onMounted, reactive, ref} from "vue";
import comTable from '@/sa-frame/com/table/table.vue'

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    id: prop.param.id || 0,   // 获取传值id （0=添加，非0=修改）
    model: {},  // 数据 Model
})
const tabActive = ref('first')
// 医疗机构资质证书信息
const certificate = reactive({
    active: 0,
    picCfg: [{
        name: '法人身份证',
        key: 'FrontAccessoryUrl',
        list: []
    },{
        name: '营业执照',
        key: 'BusinessLicenseAccessoryUrl',
        list: []
    },{
        name: '药品经营许可证',
        key: 'DrugBLAccessoryUrl',
        list: []
    },{
        name: '医疗器械经营许可证',
        key: 'MedicalDeviceBLAccessoryUrl',
        list: []
    },{
        name: 'GS认证证书',
        key: 'GSCertificateAccessoryUrl',
        list: []
    },{
        name: '开户许可证',
        key: 'AccountLicenceAccessoryUrl',
        list: []
    }]
})

// 医疗机构医师数据
const doctors = reactive({
    tableData: [],
    tableCfg: [
  {
    label: '医师姓名',
    prop: 'dr_name',
  },
  {
    label: '医师编号',
    prop: 'dr_code',
  },
  {
    label: '所属科室',
    prop: '',
  },
  {
    label: '医师类型',
    prop: 'dr_type',
  },
  {
    label: '性别',
    prop: '',
  },
  {
    label: '联系电话',
    prop: 'dr_phone'
  },
  {
    label: '职业资格证',
    prop: 'age'
  },
  {
    label: '创建时间',
    prop: 'CreateDT'
  }
]
})
// 组件加载时触发
onMounted(() => {
    f5();
})

// ------------------ 函数 ------------------
// 查询 
const f5 = function () {
    const params = {
        MedinsinfoId: state.id
    }
    sa.ajax('/api/webPresAdmin/medinsinfoDetail?MedinsinfoId=',params, function (res) {
        let data = res.data;
        if(!res.data) {
            return sa.alert('数据不存在');
        }
        certificate.picCfg[0].list = data.FrontAccessoryUrl.split(',').concat(data.BackAccessoryUrl.split(','));
        certificate.picCfg[1].list = data.BusinessLicenseAccessoryUrl.split(',');
        certificate.picCfg[2].list = data.DrugBLAccessoryUrl.split(',');
        certificate.picCfg[3].list = data.MedicalDeviceBLAccessoryUrl.split(',');
        certificate.picCfg[4].list = data.GSCertificateAccessoryUrl.split(',');
        certificate.picCfg[5].list = data.AccountLicenceAccessoryUrl.split(',');
        state.model = res.data;
        doctors.tableData = res.data1
    })
}

</script>

<style scoped lang="scss">
@use "@/sa-frame/sa.scss" as *;

.c-item{
    margin-bottom: 15px;
}
.pic-tab{
    .item{
        background: #f2f3f5;
        padding: 5px 20px;
        border-radius: 5px;
        margin-right: 10px;
        cursor: pointer;
        &:hover{
            color: $primary;
        }
        &.active{
            background: $primary;
            color: #fff;
        }
    }
}
.pic-box{
    min-height: 280px;
}
</style>
